<template>
	<view class="bigBox">
		<u-navbar leftIconColor='#fff' :autoBack="true" bgColor='#000' title='物流信息' titleStyle="color:#fff;">
		</u-navbar>
		<view class="sort">
			<image src="@/static/icon/kd.png" class="image"></image>
			<view class="title">顺丰快递</view>
			<view class="text">SF203920940124</view>
		</view>
		<view class="data">
			<view class="text1">物流信息</view>
			<view class="text2">SF2931947850</view>
			<view class="text3">物流承运公司：顺丰快递</view>
			<view style="padding-left: 20rpx;">
				<u-steps current="0" direction='column' dot >
					<template v-for="item in list">
						<u-steps-item :title="item.title" :desc="item.desc"></u-steps-item>
					</template>
					
				</u-steps>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				list:[{
					title:'运输中',
					desc:'11:40'
				},{
					title:'已出库',
					desc:'10:35'
				},{
					title:'已下单',
					desc:'10:30'
				}]
			}
		}
	}
</script>

<style>
	.bigBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 160rpx;
		height: calc(100vh - 320rpx);
		padding-bottom: 160rpx;
		background-color: #F8F8F8;
	}
</style>
<style lang="less">
	.data {
		margin-top: 20rpx;
		width: 670rpx;
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;

		.text1 {
			color: rgba(190, 199, 209, 100);
			font-size: 12px;
		}

		.text2 {
			color: rgba(0, 7, 15, 100);
			font-size: 12px;
			font-weight: 700;
		}

		.text3 {
			color: rgba(190, 199, 209, 100);
			font-size: 20rpx;
		}
	}

	.sort {
		margin-top: 20rpx;
		width: 670rpx;
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		align-items: center;

		.image {
			width: 50rpx;
			height: 50rpx;
		}

		.title {
			margin-left: 30rpx;
			color: rgba(12, 16, 47, 100);
			font-size: 28rpx;
		}

		.text {
			margin-left: 20rpx;
			color: rgba(190, 199, 209, 100);
			font-size: 24rpx;
		}
	}
</style>
